<template>
    <tr>
        <td colspan="6">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <colgroup>
                    <col width="5%">
                    <col width="35%">
                    <col width="14%">
                    <col width="11%">
                    <col width="6%">
                    <col width="29%">
                </colgroup>
                <tbody>
                    <tr class="tbody-data">
                        <td align="center">
                            <div class="td-param-op">
                                <Icon
                                    v-if="isEditing"
                                    type="close"
                                    class="pointer"
                                    title="删除当前参数及其子参数"
                                    @click.native="deleteParams(trId)">
                                </Icon>
                                <Icon
                                    v-if="isFlexParam(param.dataType) && isEditing"
                                    type="plus"
                                    class="pointer"
                                    title="在当前参数下添加子参数"
                                    @click.native="addSubParams(trId)">
                                </Icon>
                                <Icon
                                    v-if="isFlexParam(param.dataType)"
                                    :type="isShowSubParams ? 'arrow-down-b' : 'arrow-right-b'"
                                    class="pointer"
                                    title="伸缩当前参数的子参数"
                                    @click.native="flexSubParams">
                                </Icon>
                            </div>
                        </td>
                        <td
                            :id="trId"
                            :class="isShowTdBorder ? '' : 'td-identifier'"
                            :style="isEditing ? 'padding-left: ' + (4 + 20 * paramLevel) + 'px' : ''">
                            <div
                                class="tab-block-container"
                                v-if="!isEditing"
                                v-html="getTabBlock(paramLevel)">
                            </div>
                            {{!isEditing ? param.identifier : ''}}
                            <Input v-if="isEditing" v-model="param.identifier"></Input>
                        </td>
                        <td align="center">
                            {{!isEditing ? param.name : ''}}
                            <Input
                                v-if="isEditing"
                                v-model="param.name"
                                type="textarea"
                                :autosize="true">
                            </Input>
                        </td>
                        <td align="center">
                            {{!isEditing ? param.dataType : ''}}
                            <Select
                                v-if="isEditing"
                                v-model="param.dataType"
                                size="small">
                                <Option
                                    v-for="item in dataTypes"
                                    :value="item.value"
                                    :key="item.value">
                                    {{ item.value }}
                                </Option>
                            </Select>
                        </td>
                        <td align="center">
                            <i-switch v-model="param.canEmpty" :disabled="isEditing ? false : true">
                                <span slot="open">是</span>
                                <span slot="close">否</span>
                            </i-switch>
                        </td>
                        <td>
                            {{!isEditing ? param.remark : ''}}
                            <Input
                                v-if="isEditing"
                                v-model="param.remark"
                                type="textarea"
                                :autosize="true">
                            </Input>
                        </td>
                    </tr>
                    <TrParams
                        v-if="param.paramList && param.paramList.length"
                        v-show="isShowSubParams"
                        v-for="(item, index) in param.paramList"
                        :key="index"
                        :param="item"
                        :paramLevel="paramLevel + 1"
                        :isShowTdBorder="isShowTdBorder"
                        :trId="trId + index"
                        :isEditing="isEditing">
                    </TrParams>
                </tbody>
            </table>
        </td>
    </tr>
</template>

<script>
    import eventBus from '../../lib/eventBus';

    // 递归组件
    export default {
        name: 'TrParams',
        props: {
            type: {
                type: Number,
                default: 1,
            },
            param: {
                type: Object,
                default: () => {},
            },
            isEditing: {
                type: Boolean,
                default: false,
            },
            isShowTdBorder: {
                type: Boolean,
                default: true,
            },
            // 用于控制参数行伸缩
            paramLevel: {
                type: Number,
                default: 0,
            },
            trId: {
                type: String,
                default: '0',
            },
        },
        data() {
            return {
                dataTypes: [
                    {
                        value: 'string',
                    },
                    {
                        value: 'number',
                    },
                    {
                        value: 'boolean',
                    },
                    {
                        value: 'object',
                    },
                    {
                        value: 'array[string]',
                    },
                    {
                        value: 'array[number]',
                    },
                    {
                        value: 'array[boolean]',
                    },
                    {
                        value: 'array[object]',
                    },
                    {
                        value: 'array',
                    },
                ],
                isShowSubParams: true,
            };
        },
        methods: {
            isFlexParam(dataType) {
                return dataType === 'object' || dataType === 'array[object]';
            },

            getTabBlock(paramLevel) {
                const tabBlockStr = '<span class="tab-block"></span>';
                return tabBlockStr.repeat(paramLevel);
            },

            /**
             * flexParam 控制子参数伸缩
             */
            flexSubParams() {
                this.isShowSubParams = !this.isShowSubParams;
            },

            /**
             * deleteParams 删除当前参数及其子参数
             * @param  {string} trId 参数行标识
             */
            deleteParams(trId) {
                eventBus.$emit('deleteParams', {
                    trId,
                    type: this.type,
                });
            },

            /**
             * addSubParams 添加子参数
             * @param  {string} trId 参数行标识
             */
            addSubParams(trId) {
                eventBus.$emit('addSubParams', {
                    trId,
                    type: this.type,
                });
            },
        },
    }
</script>

<style lang="less">
    .tbody-data {
        td {
            padding: 4px;
            border: 1px solid #e9eaec;
            text-overflow: ellipsis;
            .td-param-op {
                display: flex;
                justify-content: space-between;
                .ivu-icon {
                    padding: 2px;
                    &.ivu-icon-arrow-right-b, &.ivu-icon-arrow-down-b {
                        padding: 2px 4px;
                    }
                    &:hover {
                        background-color: #e9eaec;
                        border-radius: 4px;
                    }
                }
            }
            .ivu-input {
                font-size: 12px;
                height: 28px;
            }
            .pointer {
                cursor: pointer;
            }
            &.td-identifier {
                border-width: 0 1px;
            }
            .tab-block-container {
                display: inline-block;
                .tab-block {
                    width: 20px;
                    height: 18px;
                    display: inline-block;
                    margin-right: 2px;
                    vertical-align: middle;
                    border-right: 1px dashed #ccc;
                }
            }
        }
    }
</style>
